<template>
  <div>
    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        prop="id"
        label="学号"
        width="80">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="100">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="电话"
        width="120">
      </el-table-column>
      <el-table-column
        prop="email"
        label="邮箱"
        width="200">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="150">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="warning"
            @click="handleEdit(scope.row)">
            <i class="el-icon-edit"></i>
            编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row)">
            <i class="el-icon-delete"></i>
            删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--模板分页-->
    <el-pagination
      background
      layout="prev, pager, next"
      @current-change = "getcurrentPage"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="totals">
    </el-pagination>
  </div>
</template>

<script>
// 引入axios
import axios from "axios";
export default {
  name: 'Student',
  data () { // 模型数据
    return {
      tableData: [],
      // 默认分页当前页数
      currentPage: 1,
      // 默认分页每页展示数据条数
      pageSize: 5,
      // 默认总条数为0
      totals: 0
    }
  },
  methods: { // 自定义函数
    handleEdit(row) { // 编辑
      console.log(row);
    },
    handleDelete(row) { // 删除
      console.log(row);
    },
    getcurrentPage(currentPage){ // 分页点击事件：当前页
      this.currentPage = currentPage
      // 再次获取数据
      this.getStudent();
    },
    getStudent(){ // 获取学生数据的方法
      axios.post("/stu/list",{
        "currentPage":this.currentPage,"pageSize":this.pageSize
      }).then((res)=>{ // 回调函数
        // res 为后端响应给前端的所有数据
        console.debug(res); // {"totals":53,"data":[{...}]}
        //给前端数据数组赋值
        this.tableData = res.data.data
        // 获取到后端模拟数据的总条数，并赋值给前端的
        this.totals = res.data.totals
      }).catch((res)=>{
          alert("获取后端数据异常！")
      })
    }
  },
  mounted() { // 钩子函数
    this.getStudent(); // 页面加载前获取到数据
  }
}
</script>
